@charset "UTF-8";
@import "./_kit/reset.scss";
@import "./_kit/variables.scss";
@import "./_kit/_mixin.scss";


.student-container{
    background: url("../../assets/images/background.png") repeat;
    //background-size:cover;
    //position: absolute;
    width:100%;
    height: 100%;
    min-height: 100vh;
    img{
        width: 100%;
        height: $rem*350;
        background-size: cover;
    }
    .detail_wrap{
        .detail_introduce{
            border-radius: $rem*10;
            background-color: rgba(253,255,254,.9);
            position: relative;
            margin: -$rem*37 $rem*20 $rem*50 $rem*20;
            text-align: center;
            .title{
                //height:$rem*97;
                color: #fff;
                background: -webkit-linear-gradient(left,#CB1219 0,#CE0F46 100%);
                border-radius: $rem*10;
                text-align: center;
                line-height: $rem*97;
                display: inline-block;
                padding:0 $rem*30;
                margin-top: $rem*-30;
            }
            .introduce-text{
                padding: $rem*80 $rem*30 $rem*20 $rem*30;
                text-align: left;
                hr{
                    height: $rem*1;
                    background-color: #666;
                    margin-top: 0;
                }
                p{
                    font-size: $rem*24;
                    color:#333;
                    text-indent: 2em;
                    margin-bottom: $rem*20;
                    margin-top: $rem*20;
                }
            }
        }
        .activity-content{
            padding:0 $rem*20;
            &>div{
                padding: 0 $rem*30;
                background-color: #fff;
                border-radius: $rem*10;
            }
            img,
            video{
                max-width: 100%;
            }
        }
    }
    .fixed-tools-wrap{
        @include clearfix;
        height: $rem*117;

        .fixed-tools{
            background-color: #fff;
            position: fixed;
            line-height: $rem*117;
            padding-left: $rem*50;
            font-size: $rem*28;
            bottom: 0;
            width: 100%;
            &.button-groups{
                text-align: center;
                .btn-primary{
                    background-color:#C52B3E;
                    color:#fff;
                    font-size: $rem*30;
                    margin-right: $rem*50;
                    min-width: $rem*180;
                    height: $rem*80;
                    white-space: nowrap;
                }
            }

            .money{
                color:#C52B3E;
            }
            .signup-btn{
                width: $rem*245;
                height:$rem*115;
                float: right;
                font-size: $rem*34;
                color:#fff;
                background-color:#C52B3E;
                &.is-invalid,
                &:disabled{
                    background: #ada4a4;
                }
            }
            .volunteer-button-center{
                float:inherit;
                height: $rem*80;
                border-radius: $rem*10;
                width: $rem*200;
                white-space: nowrap;
            }
        }
        .volunteer-center{
            text-align: center;
            padding-left: 0;
        }
    }
    .affirm-card{
        width: 100%;
        height: $rem*310;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        padding:$rem*35 $rem*50;
        //transform: translate(0,100%);
        //transition: transform .6s ease-in;
        display: none;
        span{
            font-size: $rem*32;
            color:#666;
            padding: $rem*15 $rem*30;
            border-radius: $rem*5;
            margin-right: $rem*35;
            background: #eee;
            white-space:nowrap;
            &.is-actived{
                color: #fff;
                background-color:#C52B3E;
            }
        }
        .count-wrap{
            margin: $rem*35 0 $rem*40 0;
            .modify{
                border: 1px solid #666;
                font-size: $rem*32;
                display: inline-block;
                margin-right: $rem*25;
                width: $rem*40;
                height: $rem*40;
                text-align: center;
                line-height: $rem*40;
                color:$primary-color;
            }
            .count{
                width: $rem*80;
                color:#333;
            }
        }
        .button-wrap{
            text-align: center;
            button{
                min-width: $rem*186;
                height: $rem*78;
                background-color:#C52B3E;
                color: #fff;
                font-size: $rem*32;
                border-radius: $rem*10;
                margin: 0 $rem*25;
                border: none;
                white-space: nowrap;
            }
        }
    }
    .affirm-card-in{
        //transform: translate(0,0)
        display: block;
    }
}
